window.onload = function() {
  console.log('index had been loaded!');
  function g(id) {
    return document.getElementById(id);
  }

  const addEvent = (function () {
    console.log(window.addEventListener)
    if (true) {
      return function (obj, evt, fn, useCapture) {
        return obj.addEventListener(evt, fn, useCapture)
      }
    } else if (window.attachEvent) {
      return function (obj, evt, fn) {
        return obj.attachEvent('on' + evt, fn)
      }
    } else {
      return function (obj, evt, fn) {
        obj['on' + evt] = fn
      }
    }
  })();

  
  const removeEvent = (function () {
    if (window.removeEventListener) {
      return function (obj, evt, fn) {
        obj.removeEventListener(fn)
      }
    } else if (window.detachEvent) {
      return function (obj, evt, fn) {
        obj.detachEvent('on' + evt, fn)
      }
    } else {
      return function (obj, evt, fn) {
        obj['on' + evt] = null
      }
    }
  })();

  function hasClass(elem, cls) {
    cls = cls || '';
    if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
    return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
  }

  function addClass(elem, cls) {
    if (!hasClass(elem, cls)) {
      elem.className = elem.className == '' ? cls : elem.className + ' ' + cls;
    }
  }

  function removeClass(elem, cls) {
    if (hasClass(elem, cls)) {
      let newClass = ' ' + elem.className.replace(/[\t\r\n]/g, '') + ' ';
      while (newClass.indexOf(' ' + cls + ' ') >= 0) {
        newClass = newClass.replace(' ' + cls + ' ', ' ');
      }
      elem.className = newClass.replace(/^\s+|\s+$/g, '');
    }
  }

  // 产品介绍切换
  const navCate = g('nav_cate');
  const navItems = navCate.getElementsByClassName('nav_item');
  for (let index = 0; index < navItems.length; index++) {
    const navItem = navItems[index];
    addEvent(navItem, 'click', () => {
      g('part1').style.opacity = 0;
      g('part2').style.opacity = 0;
      g('part1').style.zIndex = -1;
      g('part2').style.zIndex = -1;
      let curPart = g('part' + (index + 1));
      curPart.style.opacity = 1;
      setTimeout(function () {
        curPart.style.zIndex = 0;
      }, 200);
      g('content').style.height = (curPart.clientHeight || curPart.offsetHeight) + 'px';
    })
  }

  // 主要线路 表格切换
  const tagCon = g('tagCon');
  const China2RussiaTable = g('China2RussiaTable')
  const China2EuropeTable = g('China2EuropeTable')
  const tagDomCollection = tagCon.getElementsByTagName('span')
  for (let index = 0; index < tagDomCollection.length; index++) {
    addEvent(tagDomCollection[index], 'click', function (e) {
      const curClickObj = e.srcElement ? e.srcElement : e.target;
      const relativeTable = g(curClickObj.dataset.table);
      removeClass(China2RussiaTable, 'showIn')
      removeClass(China2EuropeTable, 'showIn')
      for (let index = 0; index < tagDomCollection.length; index++) {
        removeClass(tagDomCollection[index], 'active');
      }
      addClass(relativeTable, 'showIn')
      addClass(curClickObj, 'active')
    },false);
  }

  // 服务流程 流程项动画
  const servceProcess = g('servceProcess');
  const servceProcess2 = g('servceProcess2');
  const processItems = servceProcess.getElementsByClassName('process_item');
  const processItems2 = servceProcess2.getElementsByClassName('process_item');

  function addservceProcessAnimate(processItemsArr) {
    for (let index = 0; index < processItemsArr.length; index++) {
      const processItem = processItemsArr[index];
      (function (processItem) {
        const processCate = processItem.getElementsByClassName('process_cate')[0];
        addEvent(processCate, 'mouseenter', function () {
          const rotateBg = processItem.getElementsByClassName('process_cate_rotate_bg')[0];
          const scaleBg = processItem.getElementsByClassName('process_cate_bg')[0];
          addClass(rotateBg, 'rotate');
          addClass(scaleBg, 'scale');
        }, false);
    
        addEvent(processCate, 'mouseleave', function () {
          const rotateBg = processItem.getElementsByClassName('process_cate_rotate_bg')[0];
          const scaleBg = processItem.getElementsByClassName('process_cate_bg')[0];
          removeClass(scaleBg, 'scale');
          setTimeout(() => {
            removeClass(rotateBg, 'rotate');
          }, 200)
        }, false);
      })(processItem);
    }
  }

  addservceProcessAnimate(processItems);
  addservceProcessAnimate(processItems2);
}